* {
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}

@keyframes moveUp {
  100% {
    transform: translateY(-100vh);
  }
}

@function getShadow($n) {
  $shadow: '#{random(100)}vw #{random(100)}vh #fff';

  @for $i from 2 through $n {
    $shadow: '#{$shadow}, #{random(100)}vw #{random(100)}vh 1px #fff';
  }

  @return unquote($shadow);
}

$count: 1000; // 星星的数量
$duration: 600s; // 动画执行时间

@for $i from 1 through 4 {
  $duration: floor($duration / 1.5);
  $count: floor($count / 2);

  .layer#{$i} {
    $size: #{$i + 1}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    opacity: calc(#{$i + 6} * 0.09);
    top: 0;
    left: 0;
    box-shadow: getShadow($count);
    animation: moveUp $duration linear infinite;

    &::after {
      content: '';
      position: fixed;
      top: 100vh;
      left: 0;
      width: $size;
      height: $size;
      box-shadow: inherit;
      border-radius: inherit;
    }
  }
}
